<template>
    <el-dialog v-model="dialogFormVisible"
        @close="close"
        :title="title">
        <el-form
            ref="dialogForm"
            :model="dialogFormData">
            <el-form-item>
                <slot name="upload"></slot>
            </el-form-item>
            <el-form-item
                v-for="(v, k) in dialogFormData"
                :key="k"
                :label="v.label"
                :label-width="formLabelWidth"
                :prop="(k + '.value')"
                :rules="{
                    required: true,
                    trigger: 'blur',
                    message: v.label + '不能为空'
                }">
                <el-input v-model="v.value" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm(dialogForm)" type="primary">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>

import { ref, watchEffect, toRefs } from "vue"
//想法:
//1.根据传入的数据,自动创建出from表单元素,现在默认使用input
//2.表单需要具备能够检验属性的功能
//3.表单通过和不通过,可以回调对应的方法
//4.控制显示隐藏的属性
//5.控制labelWidth的属性
//声明props

//dialog使用说明
//属性:
//1. visible:Boolean
//2.dialogFormData:Object 表单的数据 {name:{lable:"item的描述",value:"对应的值"}}
//3.formLabelWidth:Stirng label的宽度
//4.title:String dialog的标题

//事件:
//validateSuccess 点击确定按钮,表单校验通过之后触发,回传一个form实例引用
//dialogCancel 点击取消按钮 触发的事件
//clsed dialog被关闭的时候触发的事件 
let props = defineProps({
    //dialog标题
    title: {
        type: String,
        default() {
            return '增加学员信息'
        }
    },
    //控制表单显示隐藏的
    visible: {
        type: Boolean,
        default() {
            return false
        }
    },
    //弹窗表单中的数据来源
    dialogFormData: {
        type: Object,
        default() {
            return {}
        }
    },
    formLabelWidth: {
        type: String,
        default() {
            return '140px'
        }
    }

})

//声明表单校验通过之后的回调
let emits = defineEmits(['validateSuccess', 'dialogCancel', 'closed'])

//dialogFromVisible的初始值,定义为传递下来的初始值
// console.log(props.visible)
let dialogFormVisible = ref(false)

//使用watchEffect侦听visible props的滨化
let { visible } = toRefs(props)
//实时侦听visible props的变化,控制dialog的显示或者隐藏
watchEffect(() => {
    // console.log(visible.value)
    dialogFormVisible.value = visible.value
})

//点击取消

let cancel = () => {
    emits('dialogCancel')
}
//点击确定
//声明一个ref引用dialog的结构
let dialogForm = ref()
let confirm = (form) => {
    form.validate(valid => {
        if (valid) {
            //表单校验通过
            emits('validateSuccess', dialogForm)
        } else {
            //表单校验不通过
        }
    })
}
//diag被关闭的时候触发的事件
let close = () => {
    emits('closed')
}


</script>